<template>
    <div>
        <table class="table">
            <tr>
                <td>房间ID</td>
                <td>
                   {{data.id  }}
                </td>
            </tr>
            <tr>
                <td>房间名称</td>
                <td>
                    <input type="text" v-model="data.name">
                </td>
            </tr>
            <tr>
                <td>销售价格</td>
                <td>
                    <input type="number" v-model="data.prica">
                </td>
            </tr>
            <tr>
                <td>房间数</td>
                <td>
                    <input type="text" v-model="data.num">
                </td>
            </tr>
            <tr>
                <td>状态</td>
                <td>
                    <input type="checkbox" v-model="data.stata">选中为启用，不选中为禁用
                </td>
            </tr>
            <tr>
                <td>房间号</td>
                <td>
                    <input type="text" v-model="data.roomid">
                </td>
            </tr>
            <tr>
               
                <td colspan="2">
                    <input type="button" value="修改" @click="Add">
                </td>
            </tr>
        </table>
    </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
import { useRoute } from "vue-router";
const data=ref({
    "id": 0,
  "name": "",
  "prica": 0,
  "num": 0,
  "stata": true,
  "roomid": 0,
  "isdelete": true
})
onMounted(()=>{
    roomfan();
})
const roomfan=()=>{
    axios.get("https://localhost:7131/api/Room/Fantian",{params:{id:useRoute().query.id}}).then(res=>{
        data.value=res.data
    })
}
const Add=()=>{
    if(data.value.name==""){
        alert('房间名称不能为空');
        return;
    }
    
    if(confirm('确定修改吗？')){
        return;
    }
   axios.put("https://localhost:7131/api/Room/Uproom",data.value).then(res=>{
    if(res.data>0){
        alert('修改成功');
        location.href='/';
    }
    else{
        alert('修改失败');
    }
   })
}
</script>
<style scoped></style>